import React, { useEffect, useState } from 'react'
import { NoticeBar } from 'antd-mobile'

import { cinemainfo_api, cinemamovieinfo_api } from "../../apis/details"
import storage from '../../utils/storage';
import "./cinemaInfo.less"



export default function CinemaInfo() {
    let [cinfo, setCinfo] = useState([]);//所有影片信息
    let [cinema, setCinema] = useState(storage.getSession('cinema'));//当前电影院信息
    let [imgText, setimgText] = useState({});//每部电影信息
    const [movieTime, setMovieTime] = useState([]);//放映厅排片信息
    const [timeText, setTimeText] = useState([]);//每天拍片信息

    useEffect(async () => {
        // setCinema也是异步函数
        let res = await cinemainfo_api({ cid: cinema.cid });
        //setCinfo是异步代码
        setCinfo(res.data.data);
    }, []);

    //初始调用，监听图片数据是否变化
    //引用数据类型不能单纯进行比较，因为他们的地址不同
    //所以直接去判断他们是否有第一个值
    useEffect(() => {
        if (cinfo[0]) {
            imagesTextFn(0, cinfo[0])
        }
    }, [cinfo])
    //监听每部影片的排片时间是否有了
    useEffect(() => {
        let mkeys = Object.keys(movieTime);//获取所有索引
        if (mkeys[0]) {
            //setTimeText(movieTime[mkeys[0]]);
            timeTextFn(mkeys[0]);
        }
    }, [movieTime])


    //该函数执行两个操作，1.获取影片的信息等，2.发送请求，获取排片
    let imagesTextFn = async (index, item) => {
        setimgText(cinfo[index]);
        //console.log(imgText);
        //获取放映厅排片信息


        let res = await cinemamovieinfo_api({ cid: cinema.cid, mid: cinfo[index].id });
        //console.log(res.data.data);
        setMovieTime(res.data.data);
        //timeTextFn(movieTime);
        storage.setSession("movie", item);
    }
    //获取每部电影的具体排片
    let timeTextFn = (item) => {
        //console.log(movieTime);
        setTimeText(movieTime[item]);
        storage.setSession('cmDay', item);

    }
    let goSeaets = (item) => {
        window.location.hash = '/seats';
        storage.setSession('cmInfo', item);
    }

    return (
        <div className="cinema-info">
            <div className="info-title">
                <NoticeBar content={"UME影城(成都成华店)，位于成华区建设北路3段6号龙湖三千集购物中心5号楼，可提供服务有3D、观影小食、DMAX、可停车"} color='alert' />
                <h2>{cinema.name}</h2>
                <p>{cinema.address}</p>
                <p>{cinema.type}</p>
            </div>
            <div className="info-images">
                {
                    cinfo.map((item, index) => {
                        return (
                            <img src={item.image} alt="" key={index} onClick={() => { imagesTextFn(index, item) }} style={{ transform: `${item.id === imgText.id ? 'scale(1.1)' : 'scale(1)'} ` }} />
                        )
                    })
                }
            </div>
            <div className="info-text">
                <h3>{imgText.name}  </h3>
                <p>电影评分 <span>{imgText.point}</span></p>
                <p>{imgText.time}分钟/{imgText.type}</p>
            </div>
            <div className="info-time">
                <div className="mtime">
                    {/* 获取对象的所有key值 */}
                    {
                        Object.keys(movieTime).map((item, index) => {
                            return (
                                <span key={index} onClick={() => { timeTextFn(item) }} style={{ borderBottom: `2px solid  ${movieTime[item] === timeText ? "#ff2e62" : "#fff"}` }}>{item}</span>
                            )
                        })
                    }
                </div>
                <ul className="mtime-text">
                    {
                        timeText.map((item, index) => {
                            return (
                                <li key={index}>
                                    <p>
                                        <span>{item.starttime}</span><br />
                                        <em>{item.endtime}散场</em>
                                    </p>
                                    <p>
                                        <span>{item.name}</span><br />
                                        <em>{item.type}</em>
                                    </p>
                                    <p>￥{item.price}</p>
                                    <p><button onClick={() => { goSeaets(item) }}>购票</button></p>
                                </li>
                            )

                        })
                    }
                </ul>

            </div>




        </div>
    )
}
